
<template>
  <dev>
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/option/' + $route.params.username + '/exercises' }"
        >练习题管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>{{ categoryName }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ Interval.IntervalName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </dev>
  <el-divider></el-divider>
  <dev>
    <el-tabs type="border-card">
      <el-tab-pane label="单选题">
        <el-table :data="Interval.singleChoices" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <p>{{ props.row.subject }}</p>
              <p v-for="(item, index) in props.row.items" :key="index">
                {{ String.fromCharCode(index + 65) + "." }}
                &nbsp;&nbsp;&nbsp;&nbsp;
                {{ item }}
              </p>
              <el-divider></el-divider>
              <p>答案:</p>
              <p>
                {{ props.row.answer }}
              </p>
              <el-divider></el-divider>
              <p>详细解答:</p>
              <p class="detailedAnswerText">{{ props.row.detailedAnswer }}</p>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="题目" prop="subject" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="多选题">
        <el-table :data="Interval.multipleChoices" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <p>{{ props.row.subject }}</p>
              <p v-for="(item, index) in props.row.items" :key="index">
                {{ String.fromCharCode(index + 65) + "." }}
                &nbsp;&nbsp;&nbsp;&nbsp;
                {{ item }}
              </p>
              <el-divider></el-divider>
              <p>答案:</p>
              <p>{{ props.row.answer }}</p>
              <el-divider></el-divider>
              <p>详细解答:</p>
              <p class="detailedAnswerText">{{ props.row.detailedAnswer }}</p>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="题目" prop="subject" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="判断题">
        <el-table :data="Interval.judges" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <p>{{ props.row.subject }}</p>
              <el-divider></el-divider>
              <p>答案:</p>
              <p>{{ boolToChar(props.row.answer) }}</p>
              <el-divider></el-divider>
              <p>详细解答:</p>
              <p class="detailedAnswerText">{{ props.row.detailedAnswer }}</p>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="题目" prop="subject" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="简答题">
        <el-table :data="Interval.shortAnswer" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
              <p>{{ props.row.subject }}</p>
              <el-divider></el-divider>
              <p>详细解答:</p>
              <p class="detailedAnswerText">{{ props.row.detailedAnswer }}</p>
            </template>
          </el-table-column>
          <el-table-column label="序号" type="index"> </el-table-column>
          <el-table-column label="题目" prop="subject" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </dev>
</template>

<style scoped>
.detailedAnswerText {
  white-space:pre-wrap
}
</style>

<script lang="ts">
import { defineComponent } from "vue";
import LocalData from "../dataGain/LocalData";
export default defineComponent({

  data() {
    return {
      userName: this.$route.params.username,
      firstIndex: Number(this.$route.params.firstIndex),
      secondIndex: Number(this.$route.params.secondIndex),
      categoryName:
        LocalData.methods.GetData("exercises")[
          Number(this.$route.params.firstIndex)
        ].CategoryName,
      Interval:
        LocalData.methods.GetData("exercises")[
          Number(this.$route.params.firstIndex)
        ].Interval[Number(this.$route.params.secondIndex)],
    };
  },
  methods: {
    boolToChar(bool: boolean) {
      if (bool) {
        return "正确"
      }
      return "错误"
    }
  },
});
</script>